<template>
  <div class="user-container">
    <Back/>
    <div class="text-center color-white lh-40">
      <h4><strong>订单号</strong></h4>
      <p>{{order}}</p>
    </div>
    <div class="blank-40"></div>
    <div><el-button type="warning" round class="button-block" @click="gotoPay"><strong>去支付</strong></el-button></div>
    <div class="blank-20"></div>
    <div><el-button type="primary" round class="button-block" @click="overPay"><strong>完成支付</strong></el-button></div>
  </div>
</template>

<script>
import {OrderStatus} from "@/api/pay.js";

export default {
  name: "PayStatus",
  components: {},
  data(){
    return {
      order: localStorage.getItem("order_no"),
      timer: null
    }
  },
  beforeMount() {
    this.getOrderStatus();
    this.handleInter();
  },
  methods: {
    orderStatus() {
      const order_no = this.order;
      return OrderStatus({order_no}).then((res) => {
        const status = res.data.status;
        return status;
      })
    },
    async getOrderStatus() {
      const status = await this.orderStatus();
      this.toResult(status);
    },
    // 轮询订单状态
    handleInter() {
      this.timer = setInterval(() => {
        this.getOrderStatus();
      },3000)
    },
    async gotoPay() {
      const status = await this.orderStatus();
      this.toResult(status);
    },
    async overPay() {
      const status = await this.orderStatus();
      this.toResult(status);
    },
    toResult(status) {
      if(status === "success") {
        clearInterval(this.timer);
        this.$router.replace({path:"/payResult",query:{status}})
      }
    }
  }
}
</script>

<style lang="scss">
</style>